<template>
  <div class="home">
    <h1>你好欣玉</h1>
    <p>你不好，陈权</p>
    <router-link :to="{name:'About', params:{id:1}, query:{msg:'<h1>你好傻蛋</h1>'}}">新闻1</router-link>
    <router-link :to="{name:'About', params:{id:2}}">新闻2</router-link>
    <router-link :to="{name:'About', params:{id:3}}">新闻3</router-link>
    <router-link :to="{name:'About', params:{id:4}}">新闻4</router-link>

    <div class="pages">
      <Button @click="skipPage(1)">页面1</Button>
      <Button @click="skipPage(2)">页面2</Button>
    </div>
    <div class="page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  created () {
    localStorage.setItem("datas", JSON.stringify({ code: 200, msg: "你好" }));
  },
  methods: {
    skipPage (index) {
      this.$router.push({ name: "Page" + index });
    }
  }
}
</script>

<style lang="less">
.login {
  font-size: 25px !important;
}
.nav {
  .nav_con {
    background-color: blue;
  }
}
.page {
  height: 300px;
  background-color: #f4f4f4;
}
</style>

<!-- 
vue中组件分为：页面级组件，普通组件。页面级组件必须放在views文件夹中。普通组件放在components文件夹中
注意：所有组件文件名都是后缀为vue的文件，该文件有三部分组成
模板：用来设置当前组件对应的HTML结构
<template>
  <div>
    
  </div>
</template>
js:属于该组件的vue实例的配置信息
<script>
export default {
  
}
</script>
style:属于该组件对应的css样式, scoped:样式隔离，即该样式只适用于当前组件
<style lang="">
  
</style>

 -->